<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Member Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="modal.css"/>
	<style type="text/css">
	.site-bgcolor{
		background:AliceBlue
	}
	</style>
</head>
<body>
	<!--
	<div id="app" class="container">
	-->
	<div id="app" class="container-fluid">
	
		<div class="row-fluid">
			<div class="col-sm-12">
				<h3 class="page-header text-center">
				通信录 <small>{{modeTitle}} (Member Viewer)</small>
				</h3>
			</div>
		</div>

		<!-- The content will change according to currentView variable -->
		<!--
		<component is="{{currentView}}">
		</component>
		-->

		<div id="objectlist" v-show="mode=='modeList'">
		<div class="row" >
			<div class="col-sm-12">
				<div class="col-sm-3">
					<button class="btn btn-default" v-on="click:onRemoveSelected($event)">删除选中记录</button>
					<!--
					<button class="btn btn-default" v-on="click: showModal=true">新增</button>
					<button class="btn btn-default" v-on="click: mode='modeAddNew'">新增</button>
					-->
					<button class="btn btn-default" v-on="click:setMode('modeAddNew')">新增</button>
				</div>
				<!-- <form id="search"> -->
				<div class="col-sm-offset-3 col-sm-3">
					<input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery" class="form-control" required />
				</div>
				<div class="col-sm-2">
					<button id='search' class="btn btn-outline btn-block btn-success save" v-on="click:basicsearch($event)"><strong>搜索</strong></button>
				</div>
				<div class="col-sm-1 text-left vertical-middle-sm">
					<h5><strong>
						<a role="button" class="control-label" data-toggle="collapse" href="#advancedsearch" aria-expanded="false" aria-controls="advancedsearch">高级...</a>
					</strong></h5>
				</div>
				<!-- </form> -->
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<br/>
			</div>
		</div>
	
		<div class="row">
			<div class="collapse col-sm-12" id="advancedsearch">
				<div class="well"> 
					<div>
					<!-- <form class="form-horizontal contract-form"> -->
						<div class="form-group">
							<label class="col-sm-2 control-label">Begin Time</label>
							<div class="col-sm-4">
								<input id="begintime" name="begintime" type="text" v-model="begintime" value="2015-01-01" class="form-control" required />
							</div>
							<label class="col-sm-2 control-label">End Time</label>
							<div class="col-sm-4">
								<input id="endtime" name="endtime" type="text" v-model="endtime" value="2015-02-01"
									class="form-control" required />
							</div>
						</div>
<!--
						<div class="form-group">
							<label class="col-sm-2 control-label">FirstName MidName LastName</label>
							<div class="col-sm-3">
								<input type="text" v-model="firstname" value="" class="form-control"/>
							</div>
							<div class="col-sm-1">
								<input type="text" v-model="midname" value="" class="form-control"/>
							</div>
							<div class="col-sm-6">
								<input type="text" v-model="lastname" value="" class="form-control"/>
							</div>
						</div>
-->
						<div class="form-group">
							<label class="col-sm-1 control-label">Logger Id</label>
							<div class="col-sm-4">
								<input id="deviceid" name="deviceid" type="text" v-model="remotedevice" value="" class="form-control" required />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-9 col-sm-1">
								<button class="btn btn-outline btn-block btn-warning">清除</button>
							</div>
							<div class="col-sm-2">
								<button id='submitbutton' class="btn btn-outline btn-block btn-success save" v-on="click:advancedsearch($event)">提交</button>
							</div>
						</div>
					<!-- </form> -->
					</div>
				</div>
			</div> <!-- advancedsearch -->
		</div>

		<div class="row">
			<div class="table-responsive col-sm-12">
				<table class="table table-bordered table-condensed table-striped">
				<thead>
					<tr class="info"> 
					<th>选择</th> 
					<th>唯一标识</th> 
					<th>姓名</th> 
					<th>性别</th> 
					<th>Email</th> 
					<th>移动电话</th> 
					<th>操作</th> 
					</tr>
				</thead>
				<!--
				<tfoot>Table footer</tfoot>			
				-->
				<tbody>
					<tr v-repeat="item:items" track-by="id">
					<td><input type="checkbox" v-model="item.selected"> </td> 
					<td><a href="#" v-on="click:onEdit(item,$event)"> {{item.id}} </a></td>
					<td>{{item.firstname}}</td> 
					<td>{{item.gender}}</td> 
					<td>{{item.email}}</td> 
					<td>{{item.mobilephone}}</td> 
					<td>
					<!--
					<button class="btn btn-default btn-xs " v-on="click:onRemoveItem(item,$event)"> 删除 </button>
					<button class="btn btn-default btn-xs " v-on="click:onEdit(item,$event)"> 编辑 </button>
					<a href="#" v-on="click:mode='modeEdit'"> 编辑 </a>
					<a href="#" v-on="click:showModal=true"> 编辑 </a>
					<a href="#" v-on="click:setMode('modeEdit')"> 编辑 </a>
					-->
					<a href="#" v-on="click:onRemoveItem(item,$event)"> 删除 </a> | 
					<a href="#" v-on="click:onEdit(item,$event)"> 编辑 </a>
					</td>
					</tr> 
				</tbody>
				</table>
			</div>
		
			<div class="col-sm-12">
			注：测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
			</div>
			
			<div class="col-sm-12">
				<hr />
			</div>
		</div>
	
		<div class="row">
			<div class="col-sm-12">
				<p>for tutorial: </p>
				<div>
					<input v-model="parentMsg" />
					<child my-message="{{parentMsg}}"></child>
				</div>
				<br />
			</div>
		</div>
	
		<div class="row">
			<div class="col-sm-12">
				<p>for Debug only: Should be removed in released version </p>
				<pre>
					<div>{{ $data | json }}</div>
				</pre>	
			</div>
		</div>
		</div>  <!-- object list view -->
	
		<div id="objectviewer" class="row" v-show="mode=='modeItemView'">
			object viewer
		</div>
		
		<!--
		<div id="objecteditor" class="row" v-show="(mode=='modeEdit') || (mode='modeAddNew')">
			object editor
		</div>
		-->
		<!--
		<itemeditor mode="{{mode}}" item="{{curitem}}" on-load="{{onChildLoaded}}" onSubmit="{{onSave($event)}}" onCancel="{{onItemCancel}}"></itemeditor>
		-->
		
		<div id="objecteditor" v-show="mode=='modeAddNew'">
		<div class="row" >
			<itemeditor mode="{{mode}}" item="{{curitem}}" on-submit="{{onSave}}" on-cancel="{{onCancel}}"></itemeditor>
		</div>
		</div>
		
		<div id="objecteditor2" v-show="mode=='modeEdit'">
		<div class="row" >
			<itemeditor mode="{{mode}}" item="{{curitem}}" on-submit="{{onSave}}" on-cancel="{{onCancel}}"></itemeditor>
		</div>
		</div>

		<div class="row"><div class="col-sm-12"><hr /></div></div>
		
		<div class="row">
			<div class="col-sm-12 text-center">
				<span>{{curdate}}</span>
			</div>
		</div>

		<div class="row"><div class="col-sm-12 text-center"><br/></div></div>
	
	<!-- use the modal component, pass in the prop -->
	<modal show="{{@showModal}}">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <div class="modal-header col-sm-12">
      <h3>请输入人员信息</h3>
    </div>	
	<div class="modal-body col-sm-12">
		<div class="row" >
			<itemeditor mode="{{mode}}" item="{{curitem}}"></itemeditor>
		</div>
	</div>
	</modal>

	</div> <!-- app -->
	
	<template id="itemeditor-tpl">
		<div class="col-sm-12">
		<!-- <form class="form-horizontal"> -->
		<div class="form-horizontal">
			<!--
			<div class="form-group">
				<div class="col-sm-offset-9 col-sm-1 ">
					<button type="submit" class="btn-block btn btn-default" v-on="click:setMode('modeList')">Cancel</button>
				</div>
				<div class="col-sm-2">
					<button type="submit" class="btn-block btn btn-default pull-right" v-on="click:onAddNew($event)">Submit</button>
				</div>
			</div>
			-->
			<div class="site-bgcolor">
			<hr />
			<div class="form-group">
				<label for="id" class="col-sm-2 control-label">Id</label>
				<div class="col-sm-4">
					<input class="form-control" id="id" readonly="readonly" v-model="item.id">
				</div>
				<label for="id" class="col-sm-1 control-label">Id</label>
				<div class="col-sm-4">
					<input class="form-control" id="id" readonly="readonly">
				</div>
				<!--
				<div class="form-right-col">
					<img height="300" src="image/to_be_added.jpg"/>
					<label>Notes:</label>
					<textarea id="description" name="description">description text here</textarea>
				</div>
				-->
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label" >Name</label>
				<div class="col-sm-4">
					<input class="form-control" id="name" placeholder="First Name Last Name" value = "{{item.firstname}}{{item.lastname}}" />
					<input class="form-control" id="name" placeholder="First Name Last Name" value = "{{item.firstname}}"/>
					<input class="form-control" id="name" placeholder="Last Name" v-model="item.lastname" />
				</div>
				<label for="name" class="col-sm-1 control-label">Gender</label>
				<!--
				<div class="checkbox">
					<label>
						<input type="checkbox" v-model="item.gender"> Male 
					</label>
				</div>
				-->
			</div>
			<div class="form-group">
				<label for="inputEmail" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-4">
					<input type="email" class="form-control" id="inputEmail" placeholder="Email" v-model="item.email">
				</div>
				<label for="inputEmail" class="col-sm-1 control-label">Email</label>
				<div class="col-sm-4">
					<input type="email" class="form-control" id="inputEmail" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="mobilephone" class="col-sm-2 control-label">MobilePhone</label>
				<div class="col-sm-4">
					<input class="form-control" id="mobilePhone" placeholder="MobilePhone" v-model="item.mobilephone">
				</div>
				<label for="mobilephone" class="col-sm-1 control-label">MobilePhone</label>
				<div class="col-sm-4">
					<input class="form-control" id="mobilePhone" placeholder="MobilePhone">
				</div>
			</div>
			<div class="form-group">
				<label for="identitycard" class="col-sm-2 control-label">IdentityCard</label>
				<div class="col-sm-4">
					<input class="form-control" id="identityCard" placeholder="IdentityCard">
				</div>
				<label for="identitycard" class="col-sm-1 control-label">IdentityCard</label>
				<div class="col-sm-4">
					<input class="form-control" id="identityCard" placeholder="IdentityCard">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-9">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox"> Remember me
						</label>
					</div>
				</div>
			</div>
			<hr />
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-default" v-on="click:onCancelClick($event)">取消</button>
					<!--
					<button type="submit" class="btn btn-default" v-on="click:onAddNew($event)">Submit</button>
					-->
					<button class="btn btn-default" v-on="click:onSubmitClick($event)">提交</button>					
				</div>
			</div>
		</div>
		<!-- </form> -->
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</template>	
		
	<!-- template for the modal component -->
	<template id="modal-template">
		<div class="modal-mask" v-show="show" v-transition="modal">
			<div class="modal-wrapper">
				<div class="modal-container">
					<content select=".modal-header">
						<div class="modal-header">
							default header
						</div>
					</content>
					<content select=".modal-body">
						<div class="modal-body">
							default body
						</div>
					</content>
					<content select=".modal-footer">
						<div class="modal-footer">
							default footer
							<button class="btn btn-default modal-button" v-on="click: show=false">Cancel</button>
							<button class="btn btn-default modal-default-button" v-on="click: show=false">OK</button>
						</div>
					</content>
				</div>
			</div>
		</div>
	</template>	
	
    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../lib/vue/0.12.16/vue.js"></script>
    <script src="../../lib/vue-resource/0.1.16/vue-resource.js"></script>
    <script src="member-v9.js"></script>
</body>
</html>